<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./phtml/css/index.css">
    <link rel="stylesheet" href="./phtml/reset.css">
     <!-- 引入bootstrap框架文件 css文件中自己写了引入字体 -->
     <link rel="stylesheet" href="./phtml/bootstrap.min.css"/>
     <!-- 动画库 -->
    <link rel="stylesheet" href="./phtml/animate.min.css" />
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="one wow fadeInLeftBig">
            <span><img src="./phtml/images/heard1.png" alt=""></span>
            <span>千库网</span>
            <span><img src="./phtml/images/headersrch.png" alt=""></span>
        </div>

        <div class="two wow fadeInLeftBig" data-wow-delay="300ms">
            <a href="./my.html">我的</a>
            <a href="./index.html">首页</a>
            <a href="./myvideo.html">视频</a>
        </div>
    </div>

    <!-- banner -->

    <div class="banner">
        <div class="bannerimg wow fadeInLeftBig" data-wow-delay="800ms">
            <img src="./phtml/images/banner.png" alt="">
        </div>

        <!-- banner五个图标 -->
        <div class="bannerbt">
                <!-- 1 -->
            <div class="bannerbtt wow fadeIn"data-wow-delay="200ms">
                <a><img src="./phtml/images/bannerbt1.png" alt=""></a>
                <div class="text">每日推荐</div>
            </div>
                <!-- 2 -->
                <div class="bannerbtt wow fadeIn"data-wow-delay="400ms">
                    <a><img src="./phtml/images/bannerbt2.png" alt=""></a>
                    <div class="text">音乐列表</div>
                </div>
            
                <!-- 3 -->
                <div class="bannerbtt wow fadeIn"data-wow-delay="600ms">
                    <a href="./RankingList.html"><img src="./phtml/images/bannerbt3.png" alt=""></a>
                    <div class="text">排行榜</div>
                </div>
            
                <!-- 4 -->
                <div class="bannerbtt wow fadeIn"data-wow-delay="800ms">
                    <a><img src="./phtml/images/bannerbt4.png" alt=""></a>
                    <div class="text">音乐电台</div>
                </div>
            
                <!-- 5-->
                <div class="bannerbtt wow fadeIn"data-wow-delay="1000ms">
                    <a><img src="./phtml/images/bannerbt5.png" alt=""></a>
                    <div class="text">音乐视频</div>
                </div>
        </div>
    </div>

    <!-- music style -->

    <div class="music">
    <div class="musicall">


        <div class="text">
            音乐风格
        </div>

        <div class="gd">
                <div class="text2">更多</div>
                <div>
                    <img src="./phtml/images/gengduo.png" alt="">
                </div>
        </div>
    </div>
    </div>

    <!-- musicimg -->
    <div class="musicimg">
        <div class="mc">
            <img src="./phtml/images/musicimg.png" alt="">
        </div>

        <div class="mc">
            <img src="./phtml/images/musicimg2.png" alt="">
        </div>

        <div class="mc">
            <img src="./phtml/images/musicimg3.png" alt="">
        </div>
    </div>


    <!-- foot -->

    <div class="foot">
        <!-- 歌手头像 -->
        <div class="yuan">
             <div class="photo">
                    <a href="./play.html"><img src="./phtml/images/footphoto.png" alt=""></a>
            </div>
        </div>


        <div class="footend">
               
            <!-- 文字 -->
            <div class="text">
                <span>And The Winner is</span>
                <span>Gerard Darmon</span>
            </div>
                <!-- 右边小图标 -->
            <div class="footright">
                <div><img src="./phtml/images/footbf.png" alt=""></div>
                <div><img src="./phtml/images/footlb.png" alt=""></div>
            </div>


        </div>
    </div>


    
</body>
</html>
<script src="./phtml/js/reset.js"></script>
<!-- 引入bootstrap 依赖的 jquery文件 -->
<script src="./phtml/js/jquery.min.js"></script>

<!-- 引入bootstrap框架的脚本文件 -->
<script src="./phtml/js/bootstrap.min.js"></script>

<!-- 引入wow.js懒加载效果 -->
<script src="./phtml/js/wow.min.js"></script>

<script>
    // wow.js 插件的初始化
    new WOW().init();
  </script>